<template>
  <div class="home-list">
    <van-pull-refresh
        v-model="isLoading"
        @refresh="onRefresh"
        :success-text="refreshSuccessText"
        :success-duration="1500">
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
<!--        <van-cell v-for="(item,index) in articles" :key="index" :title="item.title" />-->
        <article-item
            v-for="(article,index) in articles"
            :key="index"
            :title="article.title"
            :article="article"
        />
      </van-list>
    </van-pull-refresh>
  </div>

</template>

<script>
import {getArticles} from '@/api/article';
import articleItem from "./articleItem";
export default {
  name: "homeList",
  components:{
    articleItem
  },
  props:{
    channel:{
      type:Object,
      required:true
    }
  },
  data() {
    return {
      articles:[],
      loading: false,
      finished: false,
      timestamp:null,
      isLoading: false,
      refreshSuccessText:'',
    }
  },
  created() {
  },
  methods: {
   async onLoad() {
     const {data} = await getArticles({
       channel_id:this.channel.id,
       timestamp:this.timestamp||Date.now(),
       with_top:1
     })
     // console.log(data);
     // console.log(data.data.pre_timestamp);
     // console.log(Date.now());
     const {results}=data.data
      this.articles.push(...results)
      this.loading=false
     let a=results.length+1
     // console.log(a);
     if (a){
         this.timestamp=data.data.pre_timestamp;
       }else {
        this.finished=true
       }
   },
    async onRefresh() {
      const {data} = await getArticles({
        channel_id:this.channel.id,
        timestamp:this.timestamp||Date.now(),
        with_top:1
      })
      const {results}=data.data
      this.articles.unshift(...data.data.results)
      this.isLoading = false;
      this.refreshSuccessText=`更新了${results.length}条数据`
      if (results.length){
        this.timestamp=data.data.pre_timestamp;
      }else {
        this.finished=true
      }
    }
  }
}
</script>

<style scoped lang="less">
.home-list{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 50px;
  top: 90px;
  overflow-y: auto;
}
</style>